<html>

<head>
  <meta charset='utf-8' />
  <title>Timestamp Query</title>
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <meta name='full-screen' content='true' />
  <meta name='screen-orientation' content='portrait' />
  <meta name='x5-fullscreen' content='true' />
  <meta name='360-fullscreen' content='true' />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <style>
    :root {
      color-scheme: light dark;
    }

    html,
    body {
      margin: 0;
      /* remove default margin */
      height: 100%;
      /* make body fill the browser window */
      display: flex;
      place-content: center center;
    }

    #info {
      color: white;
      background-color: black;
      position: absolute;
      top: 10px;
      left: 10px;
    }

    #info pre {
      margin: 0.5em;
    }
  </style>
</head>

<body>
  <div>
    <p id="description" style="width: 600px;">
      This example shows how to use timestamp queries to measure render pass duration.
    </p>
    <div id="info">
      <pre></pre>
    </div>
    <canvas id="webgpu" style="width: 600px; height: 600px;"></canvas>
  </div>

  <script type="module" src="./index.ts"></script>
</body>

</html>